<template>
    <div class="sortPageLive">
      <!-- 分类 -->
      <div class="box" v-for="(v,index) in newResData" :key="index" @click="fun(v.proid)"> 
              <img :src="v.img1"/>
              <div class="text">
                  <p>{{v.proname }}</p>
                  <p> ¥
                      <span>{{ v.originprice }}</span>
                  </p>
              </div>
             
       </div>
       <div class="box" v-for="(v,index) in newResData1" :key="index" @click="fun(v.proid)"> 
              <img :src="v.img1"/>
              <div class="text">
                  <p>{{v.proname }}</p>
                  <p> ¥
                      <span>{{ v.originprice }}</span>
                  </p>
              </div>
             
       </div>
    </div>
  </template>
  
  <script>
  import service from '../../../request/service'
  
  export default {
      data(){
          return{
              newResData:[],
              myCategory:"口红",
              
              newResData1:[],
              myCategory1:"保健品",
          }
      },
      methods:{
        fun(v){
            this.$router.push({path:'/infogoods',query:{id:v}})
        }
    },
      mounted(){
        service({
            url:'api/pro/list',
            method:'get',
            params:{
                limitNum:100,
            }
        }).then(res=>{
            
            res.data.data.forEach(element => {
                if(element.category == this.myCategory){
                    this.newResData.push(element)
                    console.log(this.newResData)
                }else if(element.category == this.myCategory1){
                    this.newResData1.push(element)
                }
            });
            
        })
      }
  }
  </script>
  
  <style scoped>
      .sortPageLive{

        height:100%;
        background: white;
        column-count:2;
        column-gap:.5rem;
        padding: .25rem .375rem;
        box-sizing: border-box;
        }
        .box {
        break-inside: avoid;
        border-radius: .625rem;
        background-color: #fff;
        margin-bottom: .5rem;
        }
        .box img{
        height: 11rem;
        width: 11rem;
        border-top-left-radius: .625rem;
        border-top-right-radius: .625rem;
        }
        .text{
        padding: .625rem;
        text-align: left;
        font-weight: bold;
        }
        .text p:first-child{
        font-size: .875rem;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden; 
        }
        .text p:last-child{
        color: #f66;

        }
  </style>